<template>
  <modal :visible="visible" @close="close">
    <div class="tile is-parent">
      <article class="tile is-child box">
        <div class="block">
          <div class="control is-horizontal">
            <p class="control">
              <input class="input" v-model="sname" type="text" placeholder="输入一个新屏幕名称">
            </p>
          </div>
          <div class="control">
            是否保存当前修改？
          </div>
          <div class="control">
            <button class="button is-primary" @click="save">保存</button>
            <button class="button is-link" @click="close">取消</button>
          </div>
        </div>
      </article>
    </div>
  </modal>
</template>

<script>
  import {Modal} from 'vue-bulma-modal'

  export default {
    components: {
      Modal
    },
    data () {
      return {
        sname: ''
      }
    },
    props: {
      visible: Boolean,
      items: Array
    },
    methods: {
      close () {
        this.$emit('close')
      },
      save () {
        this.$emit('save', this.sname)
        this.close()
      }
    }
  }
</script>
<style scoped>
  .modal {
    z-index: 1086;
  }
  .control {
    text-align: center;
    padding: 0.75rem;
  }
</style>
